function Radar(radarContainer) {
    radarContainer.innerHTML =
        '<div class="radar-map-container">\
                                        <div class="radar-map"></div>\
                                    </div>\
                                    <div class="risk-points"></div>\
                                    <div class="scanning-circle">\
                                        <div class="radar-scanner">\
                                            <div class="inner-scanner"></div>\
                                            <div class="outer-scanner">\
                                                <div class="scanner-container">\
                                                    <div class="umbrella"></div>\
                                                    <div class="scanner-decoration">\
                                                        <div class="thin-border"></div>\
                                                    </div>\
                                                </div>\
                                            </div>\
                                        </div>\
                                    </div>';
    //原内容
    // <div className="thin-border"></div>
    // <div className="small-ellipse"></div>
    // <div className="small-ellipse"></div>
    // <div className="small-ellipse"></div>
    this._container = radarContainer;
    this._containerWidth = this._container.offsetWidth;
    this._containerHeight = this._container.offsetHeight;
    this._centerX = this._containerWidth / 2;
    this._centerY = this._containerHeight / 2;

    // 跟风险点"蒙版"有关的变量
    this._maskCtx = (function (cw, ch) {
    let c = document.createElement("canvas");
    c.width = cw;
    c.height = ch;
    return c.getContext("2d");
})(this._containerWidth, this._containerHeight);
    this._maskSectorDegree = 60;
    // 雷达扇形所占角度
    this._maskStartDegree = 0;
    // 雷达扇形开始扫描的角度
    this._scanSpeed = 2;
    // 雷达扫描速度，单位为deg

    this._outerScanner = this._container.querySelector(".outer-scanner");
    // 外层雷达扫描器

    this._riskPointsContainer = this._container.querySelector(".risk-points");

    this._allRiskPointsArr = [];
    // 保存所有风险点的数组，改变雷达扫描速度时要用到这些信息
    this._tmpRiskPointsArr = [];
    // 初始化时保存所有的风险点，雷达扫描过程中会遍历这个数组，并把当前扫描到的风险点从这个数组移动到保存风险点的对象中，雷达扫描玩一遍之后这个数组为空。这样做避免雷达扫描时重复遍历风险点，特别是当有很多风险点的时候
    this._riskPoints = {};
    // 以扫描角度为键值保存风险点信息

    this._riskElements = [];
    // 与风险点相关的虚线圆圈、红旗、信息面面和位置信息

    this._curRoamingIndex = 0;
    // 当前漫游的风险点索引

    this._radarMap = this._container.querySelector(".radar-map");

    this._roamingDuration = 0;
    // 两个风险点之间漫游时长

}

    /* 外部调用的方法 */
    Radar.prototype.init = function (options) {
    /*
          options = {
              scanSpeed: 2  // 扫描的速度，单位为deg
          }
      */
    options.scanSpeed && (this._scanSpeed = parseInt(options.scanSpeed));

    this._createCanvasElements();
    this._drawLineAndCircle();
    this._drawDashedCircle();
    this._drawDashedEmptyCircle();
    this._drawScannerSector();
    this._animate();
};

    // 添加风险点
    Radar.prototype.addRiskPoints = function (points) {
    if (!(points instanceof Array)) {
    points = [points];
}
    points.forEach(this._addOneRiskPoint.bind(this));
};

    // 调整雷达扫描速度
    Radar.prototype.changeScanSpeed = function (perTimeDeg) {
    perTimeDeg = parseInt(perTimeDeg);
    if (perTimeDeg == this._scanSpeed || 360 % perTimeDeg != 0) {
    // 每次旋转的角度必须是360的约数，否则可能会出现跳过风险点的情况
    return;
}
    this._riskPoints = {};
    this._tmpRiskPointsArr = this._allRiskPointsArr;
    this._scanSpeed = perTimeDeg;
};

    /* 私有方法 */
    Radar.prototype._addOneRiskPoint = function (options) {
    /**
     options = {
     type: 'type1', // 'type1' 或者 'type2'，风险点的颜色是红色还是蓝色
     severity: 'critical',  // 风险严重程度，'ordinary'表示普通，'critical'表示严重
     coords: [134.7728099, 53.56097399999999],  // 城市的经纬度
     city: '北京',
     title: '大额预授权交易异常',
     total: 3  // 风险卡的数量
     }
     **/
    // 计算风险点屏幕坐标
    let pointCoords = options.coords,
    point_x = pointCoords[0]*document.getElementById('radar-content-id').offsetWidth*0.01,
    point_y = pointCoords[1]*document.getElementById('radar-content-id').offsetHeight*0.01;


    // 创建风险点元素
    let riskPoint = document.createElement("div");
    riskPoint.className = "risk-point " + options.type + " " + options.severity;//添加class适配css
    if (options.type == "pulsation") {
    riskPoint.innerHTML =
    '<div class="pulse-circle"></div>\
                              <div class="pulse-circle"></div>\
                              <div class="pulse-circle"></div>';
}
    //this._riskPoints[riskPointIndex].appendChild(riskPoint);

    // 计算并设置风险点位置
    let point_left = point_x - riskPoint.offsetWidth / 2,
    point_top = point_y - riskPoint.offsetHeight / 2;
    riskPoint.style.cssText =
    "left: " + point_left + "px; top: " + point_top + "px;";

    let riskPointItem = {
    x: point_x,
    y: point_y,
    target: riskPoint
};
    this._allRiskPointsArr.push(riskPointItem);
    this._tmpRiskPointsArr.push(riskPointItem);
};


    // 创建canvas标签
    Radar.prototype._createCanvasElements = function () {
    let scanningCircleElement = this._container.querySelector(".scanning-circle");

    // 绘制雷达静止的线框和圆圈用到的canvas
    let canvas = document.createElement("canvas");
    canvas.width = this._containerWidth;
    canvas.height = this._containerHeight;
    scanningCircleElement.appendChild(canvas);
    this._lineAndCircleCanvas = canvas;

    // 绘制内部旋转的 "虚线" 圆圈用到的canvas
    this._dashedCircleCanvas = canvas.cloneNode(true);
    this._dashedCircleCanvas.className = "scanning-dashed-circle";
    scanningCircleElement.appendChild(this._dashedCircleCanvas);

    // 绘制内部旋转的 "空心虚线" 圆圈用到的canvas
    this._dashedEmptyCircleCanvas = canvas.cloneNode(true);
    this._dashedEmptyCircleCanvas.className = "scanning-dashed-empty-circle";
    scanningCircleElement.appendChild(this._dashedEmptyCircleCanvas);
};


    // 动画
    Radar.prototype._animate = function () {
    this._rotateRiskPointMask();
    this._requestId = requestAnimationFrame(arguments.callee.bind(this));
};


    // 绘制雷达静止的线框和圆圈
    Radar.prototype._drawLineAndCircle = function () {
    let radius = this._containerHeight / 2,
    ctx = this._lineAndCircleCanvas.getContext("2d");
    // 最外层圆圈
    let lineWidth = 5;
    ctx.lineWidth = lineWidth;
    ctx.strokeStyle = "#0146C2";
    ctx.beginPath();
    ctx.arc(this._centerX, this._centerY, radius - lineWidth / 2, 0, Math.PI * 2);
    ctx.closePath();
    ctx.stroke();
    // 内部圆圈
    ctx.fillStyle = "rgba(30,199,230,.5)";
    ctx.beginPath();
    ctx.arc(this._centerX, this._centerY, 3, 0, Math.PI * 2);
    ctx.closePath();
    ctx.fill();
    let totalCircle = 8;
    ctx.lineWidth = 0.5;
    ctx.strokeStyle = "rgba(30,199,230,.5)";
    for (let i = 0; i < totalCircle - 1; i++) {
    ctx.beginPath();
    ctx.arc(
    this._centerX,
    this._centerY,
    (radius / totalCircle) * (i + 1),
    0,
    Math.PI * 2
    );
    ctx.closePath();
    ctx.stroke();
}
    // 内部直线
    let totalLines = 14;
    ctx.save();
    ctx.lineWidth = 0.3;
    ctx.translate(this._centerX, this._centerY);
    ctx.rotate(Math.PI / totalLines);
    for (let i = 0; i < totalLines; i++) {
    ctx.rotate((Math.PI * 2) / totalLines);
    ctx.beginPath();
    ctx.moveTo(0, 0);
    ctx.lineTo(0, -radius + lineWidth);
    ctx.closePath();
    ctx.stroke();
}
    ctx.restore();
    // 内部虚线
    ctx.save();
    ctx.setLineDash([2, 8]);
    ctx.translate(this._centerX, this._centerY);
    for (let i = 0; i < totalLines / 2; i++) {
    ctx.rotate((Math.PI * 4) / totalLines);
    ctx.beginPath();
    ctx.moveTo(0, 0);
    ctx.lineTo(0, -radius + lineWidth);
    ctx.closePath();
    ctx.stroke();
}
    ctx.restore();
};

    // 绘制内部旋转的 "虚线" 圆圈
    Radar.prototype._drawDashedCircle = function () {
    let ctx = this._dashedCircleCanvas.getContext("2d");

    ctx.clearRect(
    -this._centerX,
    -this._centerY,
    this._dashedCircleCanvas.width,
    this._dashedCircleCanvas.height
    );
    ctx.globalAlpha = 0.8;
    ctx.lineWidth = 5;
    ctx.translate(this._centerX, this._centerY);

    let radius = (this._containerHeight / 2 / 8) * 7 - ctx.lineWidth / 2;

    ctx.strokeStyle = "#016FB7";
    ctx.beginPath();
    ctx.arc(0, 0, radius, 0, Math.PI / 5);
    ctx.stroke();

    ctx.strokeStyle = "#23B2D8";
    ctx.rotate(Math.PI / 3);
    ctx.beginPath();
    ctx.arc(0, 0, radius, 0, Math.PI / 6);
    ctx.stroke();

    ctx.strokeStyle = "#80DEF9";
    ctx.rotate(Math.PI / 3);
    ctx.beginPath();
    ctx.arc(0, 0, radius, 0, Math.PI / 18);
    ctx.stroke();

    ctx.strokeStyle = "#085BAF";
    ctx.rotate(Math.PI / 4);
    ctx.beginPath();
    ctx.arc(0, 0, radius, 0, Math.PI / 9);
    ctx.stroke();
};

    // 绘制内部旋转的空心虚线圆圈
    Radar.prototype._drawDashedEmptyCircle = function () {
    let ctx = this._dashedEmptyCircleCanvas.getContext("2d");

    ctx.clearRect(
    -this._centerX,
    -this._centerY,
    this._dashedEmptyCircleCanvas.width,
    this._dashedEmptyCircleCanvas.height
    );
    ctx.strokeStyle = "#5298D3";
    ctx.globalAlpha = 0.3;
    ctx.translate(this._centerX, this._centerY);

    let radius = (this._containerHeight / 2 / 8) * 6,
    radiusDeviation = 5, // 空心虚线的高度
    innerRadius = radius - radiusDeviation;

    ctx.beginPath();
    ctx.arc(0, 0, radius, 0, Math.PI / 5);
    ctx.arc(0, 0, innerRadius, Math.PI / 5, 0, true);
    ctx.closePath();
    ctx.stroke();

    ctx.rotate(Math.PI / 3);
    ctx.beginPath();
    ctx.arc(0, 0, radius, 0, Math.PI / 6);
    ctx.arc(0, 0, innerRadius, Math.PI / 6, 0, true);
    ctx.closePath();
    ctx.stroke();

    ctx.rotate(Math.PI / 3);
    ctx.beginPath();
    ctx.arc(0, 0, radius, 0, Math.PI / 18);
    ctx.arc(0, 0, innerRadius, Math.PI / 18, 0, true);
    ctx.closePath();
    ctx.stroke();

    ctx.rotate(Math.PI / 4);
    ctx.beginPath();
    ctx.arc(0, 0, radius, 0, Math.PI / 9);
    ctx.arc(0, 0, innerRadius, Math.PI / 9, 0, true);
    ctx.closePath();
    ctx.stroke();
};

    // 绘制雷达扫描锥形渐变扇形
    Radar.prototype._drawScannerSector = function () {
    // 创建canvas元素
    let c = document.createElement("canvas");
    c.width = c.height = this._containerHeight;
    this._outerScanner.querySelector(".umbrella").appendChild(c);
    // 绘制锥形渐变
    let ctx = c.getContext("2d");
    let sectorCnt = 10;
    // 用10块扇形模拟锥形渐变
    let startDeg = -90,
    endDeg;
    let sectorRadius = this._containerHeight / 2;
    ctx.translate(sectorRadius, sectorRadius);
    ctx.fillStyle = "rgba(19, 182, 206, 0.2)";
    for (let i = 0; i < sectorCnt; i++) {
    endDeg =
    startDeg +
    this._maskSectorDegree -
    (this._maskSectorDegree / sectorCnt) * i;
    ctx.beginPath();
    ctx.moveTo(0, 0);
    ctx.lineTo(0, sectorRadius);
    ctx.arc(
    0,
    0,
    sectorRadius,
    (Math.PI / 180) * (startDeg - 180),
    (Math.PI / 180) * endDeg
    );
    ctx.closePath();
    ctx.fill();
}
};

    // 旋转只显示风险点的区域
    Radar.prototype._rotateRiskPointMask = function () {
    function angleToRadian(angle) {
        return (Math.PI / 180) * angle;
    }
    this._maskStartDegree = this._maskStartDegree % 360;

    this._maskCtx.beginPath();
    this._maskCtx.moveTo(this._centerX, this._centerY);
    this._maskCtx.arc(
    this._centerX,
    this._centerY,
    this._containerHeight / 2,
    angleToRadian(this._maskStartDegree),
    angleToRadian(this._maskStartDegree + this._maskSectorDegree)
    );
    this._maskCtx.lineTo(this._centerX, this._centerY);
    this._maskCtx.closePath();

    // 控制风险点的显示
    let riskPointIndex = "_deg_" + this._maskStartDegree;
    if (this._tmpRiskPointsArr.length > 0) {//循环添加flashing效果
    let that = this;
    this._tmpRiskPointsArr.forEach(function (point) {
    if (that._maskCtx.isPointInPath(point.x, point.y)) {
    if (!that._riskPoints[riskPointIndex]) {//如果没有添加过才会添加新的div
    let riskPointGroup = document.createElement("div");
    riskPointGroup.className = "risk-point-group";
    that._riskPointsContainer.appendChild(riskPointGroup);
    that._riskPoints[riskPointIndex] = riskPointGroup;
}
    // 确保风险点持续闪烁
    that._riskPoints[riskPointIndex].classList.add("flashing");
    // 更新或添加新的子元素
    that._riskPoints[riskPointIndex].appendChild(point.target);
}
});
}

    // 旋转雷达扫描扇形 逆时针旋转
    // this._outerScanner.style.transform =
    // "rotate(" + this._maskStartDegree + "deg) translateZ(0)";
    // this._maskStartDegree -= this._scanSpeed;
    // 旋转雷达扫描扇形 顺时针旋转
    this._outerScanner.style.transform =
        "rotate(" + this._maskStartDegree + "deg) translateZ(0)";
    this._maskStartDegree += this._scanSpeed; // 修改这里，使角度递增

    };

    let radar = new Radar(document.querySelector(".radar"));
    radar.init({
    scanSpeed: 1
});
    // 扫描的速度，单位为deg，必须为360的约数
    radar.addRiskPoints([
        /**
         options = {
         type: 'type1', // 'type1' 或者 'type2'，风险点的颜色是红色还是蓝色
         severity: 'critical',  // 风险严重程度，'ordinary'表示普通，'critical'表示严重
         coords: [50, 50],  // 风险点的坐标,占据宽的百分比和高的百分比，
         }
         **/
        // {
        //     type: "type1",
        //     severity: "critical",
        //     coords: [60, 50],
        // },
        {
            type: "type1",
            severity: "critical",
            coords: [30,40],
        },
        {
            type: "type1",
            severity: "ordinary",
            coords: [60,26],
        },
        {
            type: "type2",
            severity: "ordinary",
            coords: [33,70],
        },
        {
            type: "type2",
            severity: "critical",
            coords: [69,60],
        }
    ]);
// // 获取 radar 元素
// const radarElement = document.querySelector('#radar-content-id');
//
// // 定义一个函数来更新 radar 元素的宽度
// function updateRadarWidth() {
//     const viewportWidth = window.innerWidth;
//     const viewportHeight = window.innerHeight;
//
//     // 计算基于当前视窗尺寸的宽度和高度的比例
//     const widthBasedOnHeight = viewportHeight * 0.356;
//     const widthBasedOnWidth = viewportWidth * 0.234;
//
//     // 取最小值作为新宽度
//     const newWidth = Math.min(widthBasedOnHeight, widthBasedOnWidth);
//
//     // 设置 radar 元素的宽度
//     radarElement.style.width = `${newWidth}px`;
//     radarElement.style.Height = `${newWidth}px`;
// }
//
// // 在窗口大小改变时更新宽度
// window.addEventListener('resize', updateRadarWidth);
//
// // 初始设置
// updateRadarWidth();